<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品详情</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/goods.css">
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 250px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="lt" onclick="javascript:history.go(-1)">&lt;</div>
      <div class="ct">商品详情</div>
      <div class="rt"></div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">

      </div>
    </div>
    <!-- 小标签 -->
    <div class="service-policy">
      <div class="item">30天无忧退货</div>
      <div class="item">48小时快速退款</div>
      <div class="item">满88元免邮费</div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-info">
      <div class="c">
        <!-- <span class="name">商品名称</span>
        <span class="desc">商品小描述</span>
        <span class="price">￥ 商品价格</span>
        <div class="brand">
          <a href="./brandDetail.html">
            <span>品牌名称</span>
          </a> -->
      </div>
    </div>
  </div>
  <div class="section-nav section-attr">
    <div class="t">请选择规格数量</div>
    <img class="i" src="./static/images/address_right.png" background-size="cover" />
  </div>
  <!---评论信息-->
  <div class="comments">
    <div class="h">
      <a href="./comment.html">
        <span class="t">评价(11)</span>
        <span class="i">查看全部</span>
      </a>
    </div>
    <div class="b">
      <div class="item">
        <div class="info">
          <div class="user">
            <img src="./static/demo/idx-brand.jpg" />
            <span>昵称</span>
          </div>
          <div class="time">2021-11-22</div>
        </div>
        <div class="content">
          这是评论正文内容这是评论正文内容这是评论正文内容
        </div>
        <div class="imgs">
          <img class="img" src="./static/demo/idx-brand.jpg" />
          <img class="img" src="./static/demo/idx-brand.jpg" />
          <img class="img" src="./static/demo/idx-brand.jpg" />
        </div>
        <!-- <div class="spec">白色 2件</div> -->
      </div>
      <div class="item">
        <div class="info">
          <div class="user">
            <img src="./static/demo/idx-brand.jpg" />
            <span>昵称</span>
          </div>
          <div class="time">2021-11-22</div>
        </div>
        <div class="content">
          这是评论正文内容这是评论正文内容这是评论正文内容
        </div>
        <div class="imgs">
          <img class="img" src="./static/demo/idx-brand.jpg" />
          <img class="img" src="./static/demo/idx-brand.jpg" />
          <img class="img" src="./static/demo/idx-brand.jpg" />
        </div>
        <!-- <div class="spec">白色 2件</div> -->
      </div>
    </div>
  </div>
  <div class="goods-attr">
    <div class="t">商品参数</div>
    <div class="l">
    </div>
  </div>
  <!-- 商品详情 -->
  <div class="detail">

  </div>

  <!-- 常见问题 -->
  <div class="common-problem">
    <div class="h">
      <div class="line"></div>
      <span class="title">常见问题</span>
    </div>
    <div class="b">

    </div>
  </div>
  <!-- 大家都在看，关联商品 -->
  <div class="related-goods">
    <div class="h">
      <div class="line"></div>
      <span class="title">大家都在看</span>
    </div>
    <div class="b"></div>

  </div>
  </div>
  <!-- 商品属性参数弹框 -->
  <div class="attr-pop-box" hidden>
    <div class="attr-pop">
      <div class="close">
        <img class="icon" src="./static/images/icon_close.png" />
      </div>
      <div class="img-info">
        <img class="img" src="./static/demo/idx-brand.jpg" />
        <div class="info">
          <div class="c">
            <div class="p">价格：￥111</div>
            <div class="a">已选择：红色，大</div>
          </div>
        </div>
      </div>
      <div class="spec-con">
        <div class="spec-item">
          <div class="name">颜色</div>
          <div class="values">
            <div class="value selected">粉红色</div>
            <div class="value">白色</div>
            <div class="value">黑色</div>
          </div>
        </div>
        <div class="spec-item">
          <div class="name">尺寸</div>
          <div class="values">
            <div class="value selected">大</div>
            <div class="value">中</div>
            <div class="value">小</div>
          </div>
        </div>

        <div class="number-item">
          <div class="name">数量</div>
          <div class="selnum">
            <div class="cut">-</div>
            <input value="1" class="number" type="number" />
            <div class="add">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部按钮区域 -->
  <div class="bottom-btn">
    <div class="l l-collect">
      <img class="icon" src="./static/images/icon_collect.png" />
      <!-- <img class="icon" src="./static/images/icon_collect_checked.png" /> -->
    </div>
    <div class="l l-cart">
      <div class="box">
        <span class="cart-count">111</span>
        <img class="icon" src="./static/images/ic_menu_shoping_nor.png" />
      </div>
    </div>
    <div class="c">立即购买</div>
    <div class="r">加入购物车</div>
  </div>
</body>
<script src="./ilb/jquery.js"></script>
<script src="./ilb/template-web.js"></script>
<script src="./ilb/baseApi.js"></script>
<script src="./ilb/swiper-bundle.min.js"></script>
<script type="text/html" id="goods_item">
{{each data}}
  <span class="name">{{$value.name}}</span>
  <span class="desc">{{$value.goods_brief}}</span>
  <span class="price">￥ {{$value.retail_price}}</span>
  <div class="brand">
    <a href="./brandDetail.html"><span>品牌名称</span></a>
  </div>
  {{/each}}
</script>

<script type="text/html" id="goods_parameter">
  {{each attribute}}
  
  
    <div class="item">
      <span class="left">{{$value.name}}</span>
      <span class="right">{{$value.value}}</span>
    </div>
   
  
  {{/each}}
</script>

<!-- 轮播图 -->
<script type="text/html" id="focus">
  {{each gallery}}
  <div class="swiper-slide"><img src="{{$value.img_url}}" background-size="cover" /></div>
  {{/each}}
  </script>
<!-- 常见问题 -->
<script type="text/html" id="problem">
    {{each issue}}
    <div class="item">
      <div class="question-box">
        <span class="spot"></span>
        <span class="question">{{$value.question}}</span>
      </div>
<br>
      <div class="answer">
        {{$value.answer}}
      </div>
    </div>
  {{/each}}
  </script>

<!-- 商品详情 -->
<script type="text/html" id="detail"></script>


<!-- 关联商品 -->

<script type="text/html" id="related-goods">
  {{each goodsList}}
<div class="item">
  <a href="javascript:;">
    <img class="img" src="{{$value.list_pic_url}}" background-size="cover" />
    <span class="name">{{$value.name}}</span>
    <span class="price">￥{{$value.retail_price}}</span>
  </a>
</div>
{{/each}}
</script>




<script>
  var swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    }
  });
  // 加入购物车逻辑：
  //  首先弹出参数选项遮罩层，进行选择
  //  只有选择好了对应的参数内容，再点击加入购物车才可以实现加入功能。
  //  总结： 第一次点击加入购物车其本质是打开遮罩层，第二次才是加入逻辑
  // TODO：按照真实业务逻辑，重新书写。这里仅做效果展示 
  let btn = document.querySelector('.bottom-btn .r')
  let box = document.querySelector('.attr-pop-box')
  let close = document.querySelector('.attr-pop-box .close')
  let row = document.querySelector('.section-nav.section-attr')
  btn.onclick = function () {
    if (box.getAttribute('hidden') === null) {
      alert('加入成功')
    } else {
      box.removeAttribute('hidden')
    }
  }
  row.onclick = function () {
    box.removeAttribute('hidden')
  }
  close.onclick = function () {
    box.setAttribute('hidden', true)
  }
  const id = location.href.slice(34)
  console.log(id);
  $.ajax({
    method: "get",
    url: "/api/goods/detail",
    data: {
      id
    },
    success: function (res) {
      const goods_item = template('goods_item', res)
      $('.c').html(goods_item)
      // 轮播图
      const focus = template('focus', res.data)
      $('.swiper-wrapper').html(focus)
      // console.log(res);
      // 常见问题
      const problem = template("problem", res.data)
      $(' .common-problem .b').html(problem)
      // 参数
      const goods_parameter = template('goods_parameter', res.data)
      $(".goods-attr .l").html(goods_parameter)
      // 商品详情
      const detail = template('detail', res.data.info.goods_desc)
      $(".detail").html(detail)
      // 关联商品

    }
  })
  $.ajax({
    method: "get",
    url: "/api/goods/related",
    data: {
      id
    },
    success: function (res) {
      console.log(res.data);
      const related_goods = template("related-goods", res.data)
      $('.related-goods .b').html(related_goods)
    }
  })



  $('.l-collect').on('click', ".icon", function () {
    $.ajax({
      method: "get",
      url: "/api/collect/addordelete",
      data: {
        typeId: 0,
        valueId: id
      },
      success: function (res) {
        console.log(res);
      }

    })
  })
</script>



</html>